<template>
  <div ref="echartDom" style="width: 100%" v-bind="$attrs"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, nextTick} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  pieData: {
    type: Array,
    default: () => []
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const tempDom = (params) => {
  let tempDom = ''
  const tempHbClass = params?.data?.percentageMom > 0 ? 'triangle-reverse' : ''
  const tempTbClass = params?.data?.percentageYoy > 0 ? 'triangle-reverse' : ''
  const tempHbColor = params?.data?.percentageMom > 0 ? '#01FEFF' : '#E13535'
  const tempTbColor = params?.data?.percentageYoy > 0 ? '#01FEFF' : '#E13535'

  switch(props?.pieData?.type) {
    case 1:
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.percentageYoy}%</span>` + `&nbsp;同比</div>`
          + `<div style="display: flex; align-items: center"><div class="triangle ${tempHbClass}"></div>&nbsp;<span style="color: ${tempHbColor}">${params.data?.percentageMom}%</span>` + `&nbsp;环比</div>`
      break
    case 2:
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.percentageYoy}%</span>` + `&nbsp;同比</div>`
      break
    default:
      tempDom = ''
      break
  }
  return tempDom
}

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      tooltip: {
        formatter: (params) => {
          console.log(params);
          return (
              `${params.name}面积：${params.value}万㎡` + '<br/>' +
              `占比：${params?.percent}%` + tempDom(params)
          );
        }
      },
      legend: {
        icon: "rect",
        padding: [pxToRem(15), 0, pxToRem(30 * props?.dialogData?.fontSizeTimes)],
        itemGap: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          padding: [pxToRem(2), 0, 0],
          rich: {}
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['75%', '95%'],
          top: '15%',
          label: {
            show: false,
          },
          labelLine: {
            show: false
          },
          data: props?.pieData?.seriesData
        }
      ]
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectChanged", (params) => {
      event.stopPropagation();
    });
  }
}

const magnifyFontSizeObj = ref({
  '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
})

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-12': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20) + 'px',
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  changeFontSize();
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  nextTick(() => {
    initEchart();
  })
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h250 {
  height: 250px;
}
.dialog-h250 {
  width: 919px;
  height: 500px;
}
</style>